<template>
	<view>
		<view class="card-cont">
			<view class="title">小券会员卡</view>
			<view class="desc" v-if="userData.vip == 2">
				有效期：365天
			</view>
			<text class="desc" v-if="userData &&  userData.vip == 1 && userData.vip_up" >
				有效时间： \n {{ userData.vip_up | filterTime(userData.vip_up) }} 至 {{ userData.vip_at | filterTime(userData.vip_at)}}
			</text>
			<view class="card-icon">
				<image src="../../../static/vip.png" mode=""></image>
			</view>
		</view>
		<view class="describe">
			<view class="title"> <text class="icon-newshot title-icon"></text> 使用权益</view>
			<text>
				 · 小券会员卡用户卖券可享受会员权益加成金额
				 · 会员用户邀请一名新会员即可获得奖励金5元
				 · 会员用户享有此平台优先权益
				 · 会员用户的交易可享有优先达成
				 · 会员用户的纠纷订单可享受优先处理权
			</text>
		</view>
		<view class="describe" v-if="userData.vip == 2">
			<view class="title"><text class="icon-info title-icon"></text>注意事项</view>
			<text>
				  · 购买会员卡需完成认证信息
			</text>
		</view>
		
		 <v-fromid>
			 <bottom-bar v-if="userData.vip == 2" buttonText="立即购买" @submit="onBuy">
			 	<text class="price">￥9.9</text>
			 </bottom-bar>
		 </v-fromid>
		
		
		<button @click="onShare" class="cu-btn bg-green share-btn shadow">邀请获得奖励金</button>
		
		<buy-hint ref="isBuyHintPopup" title="提示" top="50">
			<block v-if="userData.auth == 2">
				<text>购买会员卡需完成认证信息</text>
				<button @click="()=> this.onGoNext('../Attestation/Attestation')" class="cu-btn bg-green round shadow-blur margin-top-lg">前去认证</button>
			</block>
			<block v-if="userData.auth == 1">
				<text>购买成功！</text>
				<button @click="onPopupClick" style="width: 200rpx;" class="cu-btn bg-green round shadow-blur margin-top-lg">好的</button>
			</block>
		</buy-hint>
		
		<v-footer v-if="userData.vip == 1"></v-footer>
		<accredit ref="showPicker" @userInfo="GetUserSuccess"></accredit>
		
		<share ref="sharePopup" :poster="poster"></share>
	</view>
</template>

<script>
	import BuyHint from "@/components/BuyHint.vue"
	import BottomBar from "@/components/BottomBar.vue"
	import VFooter from "@/components/Footer.vue"
	import Share from "@/components/Share.vue"
	import vFromid from "@/components/fromid/fromid.vue"
	import userApi from "@/Api/User.js"
	import { toast } from "@/utils/util.js"
	
	export default {
		components: {
			BottomBar,
			BuyHint,
			VFooter,
			Share,
			vFromid
		},
		data() {
			return {
				userData: null,
				poster: null
			};
		},
		filters: {
			filterTime(time) {
				if(time) {
					return (time.split(' ')[0])
				} else {
					return ' '
				} 
			}
		},
		computed: {
			userAccredit() {
				return this.$store.state.userAccredit;
			}
		},
		onLoad() {
			this.getUserData()
		},
		methods: {
			getUserData(){
				userApi.getUserData()
					.then(res => this.userData = res)
			},
			onBuy() {
				let userData = this.userData
				if (this.userAccredit) {
					this.$refs.showPicker.show()
					return
				}
				if(userData.auth == 2) {
					this.$refs.isBuyHintPopup.show()
					return
				}
				// 调用支付接口
				this.showLoading('支付中')
				userApi.payVip()
					.then((res)=> {
						this.hideLoading()
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.timestamp,
							nonceStr: res.nonceStr,
							package: res.package,
							signType: res.signType,
							paySign: res.paySign,
							success: (res) => {
								// 支付成功
								this.$refs.isBuyHintPopup.show()
							},
							fail: (err)  => {
								toast('取消支付')
							}
						})
					})
			},
			
			onPopupClick() {
				this.$refs.isBuyHintPopup.close()
				this.getUserData()
			},
			
			// 微信用户授权方法回调
			GetUserSuccess(e) {
				this.$refs.showPicker.close();
				this.getUserData()
			},
			
			onShare() {
				if(this.poster) {
					this.$refs.sharePopup.show()
				} else {
					this.showLoading('加载中')
					userApi.getPoster()
						.then(res => {
							this.hideLoading()
							this.poster = res.url
							this.$refs.sharePopup.show()
						})
				}
			}
		},
		onShareAppMessage() {
			let { nickname, id } = this.userData
			return {
				title: `${nickname}发现了一个好东西跟你分享`,
				path: `/pages/Tab/BuyTicket/BuyTicket?userid=${id}`,
				imageUrl: '/static/share.png'
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #fff;
	}
	.card-cont{
		position: relative;
		overflow: hidden;
		margin: 0 50rpx;
		margin-top: 46rpx;
		background-image: linear-gradient(135deg, #49CD82 0%, #A9FFCE 100%);
		border-radius: 18rpx;
		height: 270rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #FFFFFF;
		padding: 0 40rpx;
		box-sizing: border-box;
		box-shadow: 0 6rpx 20rpx rgba(#000000,.1);
		.title {
			font-size: 36rpx;
			line-height: 50rpx;
			margin-bottom: 30rpx;
			font-weight: bold;
		}
		.desc{
			font-size: 28rpx;
			line-height: 40rpx;
		}
		.card-icon{
			width: 150rpx;
			height: 119rpx;
			position: absolute;
			top: 0;
			bottom: 0;
			margin: auto;
			right: -25rpx;
			> image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.describe{
		margin-top: 40rpx;
		padding: 0 50rpx;
		.title{
			font-size: 26rpx;
			color: #000000;
			letter-spacing: 1.44rpx;
			line-height: 37rpx;
			margin-bottom: 15rpx;
			font-weight: bold;
			.title-icon{
				color: #FFC300;
				font-size: 30rpx;
				font-weight: normal;
				margin-right: 5rpx;
			}
		}
		> text{
			font-size: 24rpx;
			color: #333;
			letter-spacing: 5rpx;
			line-height: 33rpx;
		}
	}
	.price{
		font-size: 36rpx;
		color: #FD562E;
		font-weight: bold;
		line-height: 50rpx;
		width: 275rpx;
		text-align: center;
	}
	.share-btn{
		position: absolute;
		bottom: 200rpx;
		left: 0;
		right: 0;
		margin: auto;
		width: 550rpx;
		height: 84rpx;
		line-height: 84rpx;
		border-radius: 12rpx;
		text-align: center;
		font-size: 36rpx;
		color: #fff;
	}
</style>
